html {
	background-color: #1d1f20;
	color: #ffffff;

}


.container {
	height: 300px;
	width: 300px;
	margin: 50px;

}

.person {
	position: absolute;
	height: 75px;
	width: 0;
	color: #fff;
	left: 150px;
	top: 159px;
	transform-origin: 50% 50% 0px;
	animation: sprint 2s infinite ease-in;
}

.person .head {
	position: absolute;
	top: -30px;
	left: -6px;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	border: 4px solid white;
	transform-origin: 50% 100% 0px;
	z-index: 90;
}

.person .head:before {
	content: "";
	position: absolute;
	top: 0px;
	left: -6px;
	height: 2.7px;
	width: 42px;
	border-radius: 20%;
	border: 4px solid white;
	background-color: #fff;
	transform-origin: 50% 100% 0px;
	z-index: 90;
}


.person .head:after {
	content: "";
	position: absolute;
	top: -12px;
	left: 9px;
	height: 12px;
	width: 15px;
	border-radius: 30%;
	border: 4px solid white;
	background-color: #fff;
	z-index: 90;
}

.person .torso {
	position: absolute;
	height: 60px;
	width: 0;
	border-left: 2px solid white;
	left: 0px;
	top: 15px;
	z-index: 90;
}

.person .part {
	position: absolute;
	left: 0;
	top: 75px;
	z-index: 90;
}

.person .part.arm {
	position: absolute;
	border-left: 3px solid white;
	border-bottom: 3px solid white;
	height: 45px;
	width: 39px;
	top: 15px;
	right: 300px;
	transform-origin: 0% 0% 0px;
	animation: pump 1s infinite ease-in-out;

}

.person .part.arm.two {
	animation-delay: .5s;
}

.person .part.leg {
	height: 57px;
	width: 60px;
	border-right: 3px solid white;
	border-top: 3px solid white;
	animation: run 1s infinite ease-in;
	transform-origin: 0% 0% 0px;

}

.person .part.leg.one {
	transform: rotate3d(0, 0, 1, 90deg)
}

.person .part.leg.two {
	transform: rotate3d(0, 0, 1, 80deg);
	animation-delay: .5s;

}

@keyframes bob {

	0% {

		transform: rotate3d(0, 0, 1, 5deg);

	}



	25% {

		transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);

	}



	50% {

		transform: rotate3d(0, 0, 1, 5deg);

	}



	75% {

		transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);

	}



	100% {

		transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);

	}

}

@keyframes pump {

				0% {

					transform: rotate3d(0, 0, 1, 80deg);

				}



				50% {

					transform: rotate3d(0, 0, 1, -70deg);

				}



				100% {

					transform: rotate3d(0, 0, 1, 80deg);

				}

			}
@keyframes run {

				0% {

					transform: rotate3d(0, 0, 1, -5deg);

				}



				50% {

					transform: rotate3d(0, 0, 1, 150deg);

				}



				100% {

					transform: rotate3d(0, 0, 1, -5deg);

				}

			}
@keyframes sprint {

				0% {

					transform-origin: 50% 50% 0px;

					transform: translate(-500px, 0px);

				}



				100% {

					transform: translate(0px, 0px);

					transform-origin: 50% 50% 0px;

					transform: translate(500px, 0px);

				}

			}
